<template>
    <div class="dispensingdetail">
        <el-container>
            <el-aside width="20%">
                <navmenu :currentpage="'1'" />
            </el-aside>
            <el-container>
                <el-aside width="25%" class="line01">
                    <i class="el-icon-back" @click="back"></i>
                    <div class="patientinfo">
                        <p>姓名：&nbsp;{{patientinfo.personName}}</p>
                        <p>证件类型：&nbsp;身份证</p>
                        <p>证件号码：&nbsp;{{patientinfo.personCardId}}</p>
                        <p>性别：&nbsp;{{patientinfo.personGenderName}}</p>
                        <p>出生日期：&nbsp;{{patientinfo.personBirthDate}}</p>
                        <p>年龄：&nbsp;{{patientinfo.personAge}}</p>
                        <p>手机号码：&nbsp;{{patientinfo.personPhoneNo}}</p>
                    </div>
                </el-aside>
                <el-container>
                    <el-header>
                        <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#1477fe" text-color="#b9b9b9">
                        <div v-for="(item,indexa) in prescriptionids" :key="indexa">
                            <el-menu-item :index="indexa+1">处方{{indexa+1}}</el-menu-item>
                        </div>
                        </el-menu> -->
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#1477fe" text-color="#b9b9b9">
                            <el-menu-item :index="indexa+1" v-for="(item,indexa) in prescriptionids" :key="indexa" @click="changepage(indexa)">处方{{indexa+1}}</el-menu-item>
                        </el-menu>
                    </el-header>
                    <el-main>
                        <div class="dispensingbox">
                            <el-row>
                                <el-col offset="5" span="4">
                                    处方类型：&nbsp;西药
                                </el-col>
                                <el-col offset="5" span="10">
                                    创建时间：&nbsp;{{dispensinginfo[thispage].prescription.prescriptionCreateTime}}
                                </el-col>
                            </el-row>
                            <el-table
                            :data="dispensinginfo[thispage].drugs"
                            style="width: 80%;margin-left: 10%">
                            <el-table-column
                                prop="tradeName"
                                label="药品名称"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="quantity"
                                label="数量"
                                width="100">
                            </el-table-column>
                            <el-table-column
                                prop="frequencyName"
                                label="频次"
                                width="100">
                            </el-table-column>
                            <el-table-column
                                prop="usageName"
                                label="用法"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="takeDays"
                                label="服用天数"
                                width="100">
                            </el-table-column>
                            <el-table-column
                                prop="remark"
                                label="嘱托">
                            </el-table-column>
                            <!-- <el-table-column
                            fixed="right"
                            label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small">修改</el-button>
                                <el-button type="text" size="small">删除</el-button>
                            </template>
                            </el-table-column> -->
                            </el-table>
                            <!-- <div class="addbutton">
                                <el-button type="primary">添加药品</el-button>
                            </div> -->
                        </div>
                    </el-main>
                    <el-footer class="buttonbox">
                        <el-button type="primary">添加处方</el-button>
                        <el-button type="primary">提交处方</el-button>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    const axios = require('axios');
    import navmenu from '../components/navmenu.vue'
    export default {
        components:{
            navmenu
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            changepage(index){
                console.log(index)
                this.thispage=index
            }
        },
        mounted:function(){
            var _this=this;
            axios({
                method:"get",
                url:"http://121.196.150.130:8888/Demo/consult/getById?id="+this.$route.params.id,
                }).then((res)=>{
                    // console.log(res);
                    this.patientinfo=res.data.consult
                })
            axios({
                method:"get",
                url:"http://121.196.150.130:8888/Demo/preInfo/findByConsult?id="+this.$route.params.id,
                }).then((res)=>{
                    // console.log(res);
                    if(res.data){
                        res.data.forEach(element => {
                            this.prescriptionids.push(element.prescriptionId)
                        });
                        this.prescriptionids.forEach(function(temp){
                            axios({
                            method:"get",
                            url:"http://121.196.150.130:8888/Demo/preInfo/getById?id="+temp,
                            }).then((res)=>{
                                _this.dispensinginfo.push(res.data)
                                console.log(_this.dispensinginfo)
                            })
                        })
                    }
                })
            
        },
        data(){
            return{
                thispage:0,
                patientinfo:{
                },
                prescriptionids:[],
                activeIndex:"1",
                dispensinginfo:[
                    // {
                    //     prescriptionType:'西药',
                    //     prescriptionCreateTime:'2021-7-23 22:56',
                    //     prescriptionStatus:'已提交',
                    //     drugs:[
                    //         {
                    //             drugId:'aa',
                    //             quantity:'20',
                    //             frequencyCode:'每天一次',
                    //             usageCode:'口服',
                    //             takeDays:'10',
                    //             remark:'啦啦啦'
                    //         },
                    //         {
                    //             drugId:'aa',
                    //             quantity:'20',
                    //             frequencyCode:'每天一次',
                    //             usageCode:'口服',
                    //             takeDays:'10',
                    //             remark:'啦啦啦'
                    //         },
                    //         {
                    //             drugId:'aa',
                    //             quantity:'20',
                    //             frequencyCode:'每天一次',
                    //             usageCode:'口服',
                    //             takeDays:'10',
                    //             remark:'啦啦啦'
                    //         }
                    //     ]
                    // }
                ]
            }
        }
    }
</script>

<style scoped>
    .buttonbox{
        display: flex;
        justify-content: flex-end;
        border-top:1px solid #d4d4d4;
        box-shadow: #e4e4e4 0 -5px 5px 0;
    }
    .el-button{
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
        height: 40px;
    }
    .patientinfo{
        /* text-align: center; */
        margin-left: 15%;
        position: relative;
        top: 35%; /*偏移*/
        transform: translateY(-50%);
        font-size: 20px;
    }
    .line01{
        border-right:1px solid #d4d4d4;
        box-shadow: #e4e4e4 5px 0 5px 0;
    }
    .dispensingbox{
        margin-top: 50px;
        font-size: 20px;
    }
    .addbutton{
        display: flex;
        justify-content: flex-end;
        margin-right: 10%;
        margin-top: 5%;
    }
    .el-icon-back{
        margin-top: 20px;
        margin-left: 20px;
        font-size: 32px;
        position: absolute;
    }
</style>